﻿
<div class="col-md-3">
    <div class="panel panel-default" style="height:200px;">
        <div style="margin:10px;">
            <h5 style="display:inline;"> 知  识  点 ：</h5>
            <select class="form-control" id="BigKnowledge" style="display:inline;width:60%;">
                <option value="未分类">未分类</option>
            </select>
            <p></p>
            <h5 style="display:inline;">小知识点：</h5>
            <select class="form-control" id="SmallKnowledge" style="display:inline;width:60%;">
                <option value="未分类">未分类</option>
            </select>
        </div>
        <div style="text-align:center;padding-top:20px;">
            <input type="button" class="layui-btn" value="全部题目" id="showAllQuest" />
            <input type="button" class="layui-btn" value="查询" id="selectQuestion" />
        </div>
    </div>
</div>
<div class="col-md-9">
    <div class="panel panel-default" style="height:auto;">
        <div class="row" id="title">
            <div class="col-md-1 col-sm-1">

            </div>
            <div class="col-md-4 col-sm-4">题目</div>
            <div class="col-md-2 col-sm-2">题型</div>
            <div class="col-md-1 col-sm-1">难度</div>
            <div class="col-md-2 col-sm-2">创建时间</div>
            <div class="col-md-2 col-sm-2">查看详情</div>
            <hr />
        </div>
        <div id="table_body">

        </div>
    </div>
    <div id="demo1"></div>
</div>
<script>
    var questions;
    var knowledges;
    var quest = [];//已选择的题目
    getQuestion();
    getKnowledge();

    //获取题目的数据
    function getQuestion() {
        $.ajax({
            async: false,
            url: '/Main/ResultAllQuestion',
            type: 'get',
            dataType: 'json',
            timeout: 5000,
            success: function (json) { 
                questions = json;
                layOpen(questions);
            },
        });
    };
    function layOpen(data) {
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage, layer = layui.layer;
            laypage.render({
                elem: 'demo1'
                , count: data.length
                , jump: function (obj) {
                    document.getElementById('table_body').innerHTML = function () {
                        var arr = [], thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                        layui.each(thisData, function (index, item) {
                            var items = '<div class="col-md-1 col-sm-1" >'
                                + '<input type="checkbox" onclick="IsChecked(this)" value="' + thisData[index].QuestionId + '" />'
                                + '</div >'
                                + '<div class="col-md-4 col-sm-4">' + thisData[index].QuestName + '</div>'
                                + '<div class="col-md-2 col-sm-2" data-type="' + thisData[index].QuestType + '" id="TypeName_' + thisData[index].QuestionId + '">' + thisData[index].TypeName + '</div>'
                                + '<div class="col-md-1 col-sm-1">' + thisData[index].Level + '</div>'
                                + '<div class="col-md-2 col-sm-2">' + thisData[index].CreateTime + '</div>'
                                + '<div class="col-md-2 col-sm-2">'
                                + '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs questDetails" btn_Item="' + thisData[index].QuestionId + '">'
                                + '查看详情</button>' + '</div><hr style="margin: 10px 0;"/>';
                            arr.push(items);
                        });
                        return arr.join('');
                    }();
                }
            });
        });
    }
    
    //获取所有知识点的数据
    function getKnowledge() {
        $.ajax({
            async: 'async',
            url: '/Main/GetKnowledge',
            type: 'get',
            dataType: 'json',
            timeout: 5000,
            success: function (json) {
                knowledges = json;
                showKnowledge(knowledges, "BigKnowledge");
            }
        });
    };

    $("#BigKnowledge").change(function () {
        showSmallKnowledge($(this).val(), knowledges, "SmallKnowledge");
    });
    //显示所有题目
    $("#showAllQuest").click(function () {
        $("#table_body").html("");
        layOpen(questions);
    })

    //查询题目
    $("#selectQuestion").click(function () {
        var item = $("#SmallKnowledge").find("option:selected").val();
        var quest = [];
        for (var i in questions) {
            if (item == questions[i].SmallKnowledge) {
                quest.push(questions[i].QuestionId);
            }
        }
        if (quest.length == 0) {
            layer.msg("该知识点内无题目");
        } else {
            $("#table_body").html("");
            var newArr = isExistArr(questions, quest);
            layOpen(newArr);
        }
    });

    //显示题目信息页面
    $("div").on("click",".questDetails", function () {
        var e = $(this).attr("btn_Item");
        var questionType = $("#TypeName_" + e).attr("data-type");
        getQuestDetails(e, questionType);
    })
    
    function getQuestDetails(e,questType) {
        layui.use('layer', function () {
            layer.open({
                type: 1
                , title: "题目详细信息"
                , closeBtn: false
                , area: ['40%', '60%']
                , shade: 0.6
                , id: 'LAY_Details' //设定一个id，防止重复弹出
                , btn: ['确定']
                , btnAlign: 'c'
                , content: ' <div class="row" style="width: 420px;padding: 20px;  line-height: 22px; margin-left:30px; margin-top:10px;font-weight: 300;">'
                    + '<div id="questDetails"></div>'
                    + '</div>'
                , btn1: function (index, layero) {
                    layer.close(index);
                },
            });
            $("#questDetails").load("/Main/Details", { id: e, questionType: questType });
        });
    }
    
    function isExistArr(arr1, arr2) {   // arr1原数组   arr2 要查找的数组 
        var new_arr = [];
        arr1.forEach(function (item, idx) {
            if (arr2.indexOf(item.QuestionId) != -1) {
                new_arr.push(item);
            }
        })
        return new_arr;
    }
    
    
    function IsChecked(obj) {
        Checke = $(obj).prop('checked');
        if (Checke == true) {
            quest.push($(obj).val());
        }
    };

    //显示小知识点
    function showSmallKnowledge(bigKnowledge, data, knowledge) {
        $("#" + knowledge).empty();
        $.each(data, function (i, item) {
            if (data[i].Value == bigKnowledge) {
                $.each(data[i].smallKnowledge, function (x, item) {
                    $("<option></option>")
                        .val(data[i].smallKnowledge[x].Value)
                        .text(data[i].smallKnowledge[x].Text)
                        .appendTo($("#" + knowledge))
                });
            }
        });
    }

    //显示知识点
    function showKnowledge(data,knowledge) {
        $("#" + knowledge).empty();
        $.each(data, function (i, item) {
            $("<option></option>")
                .val(data[i].Value)
                .text(data[i].Text)
                .appendTo($("#" + knowledge))
        });
    }
</script>